<template>
  <div>
    <a-button type="primary" @click="info">
      测试antd组件
    </a-button>
    <a-button type="primary" @click="subChildren">
      测试子路由
    </a-button>
    <a-button type="primary" @click="demoPage">
      测试路由和vuex
    </a-button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'main_container',
  data () {
    return {
      msg: 'vue2.5.2 使用 antd 1.6.5 演示页面，使用button按钮演示。',
      msg_description: 'vue2.5.2 使用 antd 1.6.5 演示页面，使用button按钮演示。'
    }
  },
   mounted(){
     //打开页面就提示
     this.openNotification()
   },
   methods: {
     subChildren(){
        this.$router.push({path: '/children_page', params: { userName: 'hsj' }})
     },
     demoPage(){
       this.$router.push({path: '/demo', params: { userName: 'hsj' }})
     },
    info() {
      this.$message.info('我们测试使用antd组件！');
    },
    openNotification() {
      this.$notification.open({
        message: this.msg,
        description:this.msg_description,
        onClick: () => {
          console.log('关闭通知！');
        },
      });
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
